import React,{Component} from "react";
import style from "./index.module.scss";
import {withRouter} from "react-router-dom";
import {connect} from "react-redux"

class FootNav extends Component{
    constructor(props) {
        super(props);
        this.showNav = this.showNav.bind(this);
        this.navClick = this.navClick.bind(this);
        this.isActive = this.isActive.bind(this);
        this.state={
            navIndex:0,
            isShow:true,
            showNotification:false,
        }
    }

    static defaultProps = {
        navs:[{
            title:"首页",
            action:{path:"/home"},
            children:[]
        },{
            title:"楼层",
            action:{path:"/goodslist"},
            children:[]
        },{
            title:"我的",
            action:{path:"/me"},
            children:[]
        },]
    }
    showNav(){
        let targetIndex = this.props.navs.findIndex((it)=>{
            return this.props.location.pathname === it.action.path
        });
        return targetIndex > -1 ? true:false;
    }

    navClick(i){
        this.props.history.push(this.props.navs[i].action.path);
    }

    isActive(i){
        return (this.props.navs[i].action.path === this.props.location.pathname) 
            || this.props.navs[i].children.indexOf(this.props.location.pathname) !== -1;
    }

    render() {
        let arr = this.props.carList.filter(item=>{
            return item.ischeck
        })
        let navItems = this.props.navs.map((it,i)=>{
            let _active = this.isActive(i);
            return (
                <div key={i} onClick={()=>{this.navClick(i)}}
                    style = {this.styleConfig.navItem}
                    className={_active ? `${style["nav-item"]} ${style["nav-item-active"]}`: style["nav-item"]}>
                    {_active ? <span>{it.icon}</span> : <span>{it.active}</span>}
                    <p>{it.title}</p>
                </div>
            );
        });
        return (
            <div className={style["footnav-root"]} style={!this.showNav() ? {bottom:"-70px"} : {bottom:"0"}}>
                <div className={style["nav-box"]}>
                    {
                        arr.length>0?<span className={style["buy-num"]}>{arr.length}</span>:null
                    }
                
                    {navItems}
                </div>
            </div>
        )
    }

    styleConfig = {
        navItem:{width:`${100/this.props.navs.length}%`},
    }
}

const RouteFootNav = withRouter(FootNav)

const mapStateToProps = (state)=>{
    return {
        carList: state.carList,
        messageList: state.messageList
    };
}

export default connect(mapStateToProps)(RouteFootNav);
